<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多维分析</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
	<style type="text/css">
		div>span{ width:25%; margin-left:4%; float:left; height:100%; font-size:18px; color:#fff }
		.panel{width: 800px; height:600px; border:0px solid #ccc; float:left; background:none; display: block;position:relative}
		.viewGraph{display: block; position:absolute; height:auto; padding: 10px; left: 0; right: 0; top: 0; bottom: 0; }
		div>span>a{color:#ff0; font-size:22px}
        .cols{ height:100%; min-height: 600px; padding:0px!important}
        .view{ height:50%; min-height: 300px}
	</style>
</head>

<body style="background:#fff">

<div class="container-fluid">
        <div class="row-fluid">
            <div class="col-md-8 cols">
                <div class="view" id="l1"></div>
            </div>
            <div class="col-md-4 cols" style="">
                <div class="view" id="view2" style="padding-top:30px; padding-right:20px;overflow:hidden;max-height:600px">
                    <div id="node" style="color:#000; text-align:center; font-size:14px; font-weight:800;margin-bottom:20px;">往来单位交易统计</div>
                <table class="table" id="tb1">
				<thead>
					<tr>
						<th>单位名称</th>
						<th>类别</th>
						<th>订单数</th>
						<th>总额</th>
					</tr>
				</thead>
				<tbody id="tbody1">
					<tr>
						<td>江苏万禾制药有限公司</td>
						<td>进货</td>
						<td>7527</td>
						<td>6021</td>
					</tr>
                    <tr class="error">
						<td>四川旭阳药业有限公司</td>
						<td>进货</td>
						<td>9408</td>
						<td>7527</td>
					</tr>
                    <tr>
						<td>内江宏康药业连锁</td>
						<td>销售</td>
						<td>8855</td>
						<td>7084</td>
					</tr>
                    <tr class="error">
						<td>南充市兴平药品零售连锁</td>
						<td>销售</td>
						<td>7408</td>
						<td>8527</td>
					</tr>
                    <tr class="error">
						<td>大同大源药业有限公司</td>
						<td>销售</td>
						<td>7408</td>
						<td>8527</td>
					</tr>
                    <tr class="error">
						<td>包头中药有限责任公司</td>
						<td>销售</td>
						<td>7408</td>
						<td>8527</td>
					</tr>
                    <tr class="error">
						<td>乐山市市中区建林药店</td>
						<td>销售</td>
						<td>7408</td>
						<td>8527</td>
					</tr>
                    <tr class="error">
						<td>江苏万禾制药有限公司</td>
						<td>销售</td>
						<td>7408</td>
						<td>8527</td>
					</tr>
				</tbody>
			</table>
                </div>
            </div>
        </div>
        
        <div class="row-fluid">
            <div class="col-md-8 cols">
                <div class="view" id="l2"></div>
            </div>
        <div class="col-md-4 cols">
            <div style="width:100%;height:100px;min-height:400px" id="r3"></div>
        </div>
    </div>    
    
</body>

</html>

<script src="../js/jquery.min.js"></script>
<script language="JavaScript" src="../js/bootstrap.min.js"></script>
<script src="../js/echarts.min.js"></script>

<script>

    //示例
    demo();
    var source = [];
    
    drawView3("l2");
    drawBar("r3");
	
    function setTable(dts, txt){
        var html = "";
        dts.forEach(function(d){
            html+='<tr class="error"><td>'+ d +'</td><td>销售</td><td>'+ parseInt(Math.random() * 100) +'</td><td>'+ parseInt(Math.random() * 50000) +'</td></tr>';
        });
        $("#tbody1").html(html);
        $("#node").text(txt);
    }
	function demo(){
		var myChart = Init3({}, "l1");
		myChart.showLoading();
		$.getJSON('../data/npmdepgraph.min10.json', function (json) {
			myChart.hideLoading();
            var cache = {};
            
            var option = {
				title: {
					text: '客户关系分析（可点击节点交互）'
				},
				animationDurationUpdate: 1500,
				animationEasingUpdate: 'quinticInOut',
				series : [
					{
						type: 'graph',
						layout: 'none',
						// progressiveThreshold: 700,
						data: json.nodes.map(function (node) {
                            //// cache[node.id] = node.label;
							return {
								x: node.x,
								y: node.y,
								id: node.id,
								name: node.label,
								symbolSize: node.size,
								itemStyle: {
									normal: {
										color: node.color
									}
								}
							};
						}),
						edges: json.edges.map(function (edge) {
							return {
								source: edge.sourceID,
								target: edge.targetID
							};
						}),
						label: {
							emphasis: {
								position: 'right',
								show: true
							}
						},
						roam: true,
						focusNodeAdjacency: true,
						lineStyle: {
							normal: {
								width: 1,
								curveness: 0.3,
								opacity: 1
							}
						}
					}
				]
			};
//            source = json.nodes.map(function(d){
//                return [];
//            });
            
			myChart.setOption(option, true);
            myChart.on('click', function(p){
                if(p.dataType=="node"){
                    var ls = json.edges.filter(function(l){
                        return (l.sourceID==p.name || l.targetID==p.name);
                    }).map(function(l){
                        if(l.sourceID==p.name)return l.targetID;
                        if(l.targetID==p.name)return l.sourceID;
                    });
                    setTable(ls, p.name);
                }else if(p.dataType=="node"){
                    
                }
            });
            
		});
	
        
	}
	
	

    
    
    
    function drawView3(id){
        var data = [
            [[28604,77,17096869,'南充市兴平药品零售连锁',1990],[31163,77.4,27662440,'内江宏康药业连锁',1990],[1516,68,1154605773,'大同大源药业有限公司',1990],[13670,74.7,10582082,'太极药业',1990],[28599,75,4986705,'广州台城制药有限公司',1990],[29476,77.1,56943299,'杭州国光药业有限公司',1990],[31476,75.4,78958237,'西南医科大学附属医院',1990],[28666,78.1,254830,'内蒙古中药有限责任公司',1990],[1777,57.7,870601776,'江苏万禾制药有限公司',1990],[29550,79.1,122249285,'西南药业股份有限公司',1990],[2076,67.9,20194354,'锦江区千禧药房',1990],[12087,72,42972254,'大同太极药业有限公司',1990],[24021,75.4,3397534,'郫都区安靖镇卫生服务站',1990],[43296,76.8,4240375,'广东台城制药股份有限公司',1990],[10088,70.8,38195258,'乐山市市中区建林药店',1990],[19349,69.6,147568552,'四川健康药业',1990],[10670,67.3,53994605,'包头中药有限责任公司',1990],[26424,75.7,57110117,'云南白药集团',1990],[37062,75.4,252847810,'四川旭阳药业有限公司',1990]],
            [[44056,81.8,23968973,'南充市兴平药品零售连锁',2015],[43294,81.7,35939927,'内江宏康药业连锁',2015],[13334,76.9,1376048943,'大同大源药业有限公司',2015],[21291,78.5,11389562,'太极药业',2015],[38923,80.8,5503457,'广州台城制药有限公司',2015],[37599,81.9,64395345,'杭州国光药业有限公司',2015],[44053,81.1,80688545,'西南医科大学附属医院',2015],[42182,82.8,329425,'内蒙古中药有限责任公司',2015],[5903,66.8,1311050527,'江苏万禾制药有限公司',2015],[36162,83.5,126573481,'西南药业股份有限公司',2015],[1390,71.4,25155317,'锦江区千禧药房',2015],[34644,80.7,50293439,'大同太极药业有限公司',2015],[34186,80.6,4528526,'郫都区安靖镇卫生服务站',2015],[64304,81.6,5210967,'广东台城制药股份有限公司',2015],[24787,77.3,38611794,'乐山市市中区建林药店',2015],[23038,73.13,143456918,'四川健康药业',2015],[19360,76.5,78665830,'包头中药有限责任公司',2015],[38225,81.4,64715810,'云南白药集团',2015],[53354,79.1,321773631,'四川旭阳药业有限公司',2015]]
        ];

       var option = {
            title: {
                text: '往来单位数据分析（可点击节点交互）'
            },
            legend: {
                left: 'center',
                data: ['采购', '销售']
            },
            grid:{left:40, right:40},
            xAxis: {
                name:'总额',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            yAxis: {
                name:'订单数',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                scale: true
            },
            series: [{
                name: '采购',
                data: data[0],
                type: 'scatter',
                symbolSize: function (data) {
                    return Math.sqrt(data[2]) / 5e2;
                },
                label: {
                    emphasis: {
                        show: true,
                        formatter: function (param) {
                            return param.data[3];
                        },
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(120, 36, 50, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                            offset: 0,
                            color: 'rgb(251, 118, 123)'
                        }, {
                            offset: 1,
                            color: 'rgb(204, 46, 72)'
                        }])
                    }
                }
            }, {
                name: '销售',
                data: data[1],
                type: 'scatter',
                symbolSize: function (data) {
                    return Math.sqrt(data[2]) / 5e2;
                },
                label: {
                    emphasis: {
                        show: true,
                        formatter: function (param) {
                            return param.data[3];
                        },
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(25, 100, 150, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                            offset: 0,
                            color: 'rgb(129, 227, 238)'
                        }, {
                            offset: 1,
                            color: 'rgb(25, 183, 207)'
                        }])
                    }
                }
            }]
        };

        var e = Init3(option, id);
        e.on('click', function(){
            drawBar("r3");
        });
    }

    
    
    function drawBar(id){
        var keys = ['片剂', '胶囊剂', '颗粒剂', '丸剂', '注射剂', '滴眼剂', '贴剂', '糖浆剂'
                        ,'气雾剂','散剂'];
        var v1 = keys.map(function(){
            return 80 + parseInt(Math.random() * 80);
        });
        var v2 = keys.map(function(){
            return 10 + parseInt(Math.random() * 50);
        });
        var option = {
            //backgroundColor: '#0E2A43',
            legend: {
                top: 20,
                textStyle:{
                    //color:'#fff',
                },
                data: ['订单数', '总金额']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            tooltip: {
                show:"true",
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis:  {
                type: 'value',
                axisTick : {show: false},
                axisLine: {
                    show: false,
                    lineStyle:{
                        //color:'#fff',
                    }
                },
                splitLine: {
                    show: false
                },
            },
            yAxis: [
                    {
                        type: 'category',
                        axisTick : {show: false},
                        axisLine: {
                            show: true,
                            lineStyle:{
                                //color:'#fff',
                            }
                        },
                        data: ['片剂', '胶囊剂', '颗粒剂', '丸剂', '注射剂', '滴眼剂', '贴剂', '糖浆剂'
                        ,'气雾剂','散剂']
                    },
                    {
                        type: 'category',
                        axisLine: {show:false},
                        axisTick: {show:false},
                        axisLabel: {show:false},
                        splitArea: {show:false},
                        splitLine: {show:false},
                        data: ['片剂', '胶囊剂', '颗粒剂', '丸剂', '注射剂', '滴眼剂', '贴剂', '糖浆剂'
                        ,'气雾剂','散剂']
                    },

            ],
            series: [
                {
                    name: '订单数',
                    type: 'bar',
                    yAxisIndex:1,

                    itemStyle:{
                        normal: {
                            show: true,
                            color: '#277ace',
                            barBorderRadius:50,
                            borderWidth:0,
                            borderColor:'#333',
                        }
                    },
                    barGap:'0%',
                    barCategoryGap:'50%',
                    data: v1
                },
                {
                    name: '总金额',
                    type: 'bar',
                    itemStyle:{
                        normal: {
                            show: true,
                            color: '#5de3e1',
                            barBorderRadius:50,
                            borderWidth:0,
                            borderColor:'#333',
                        }
                    },
                    barGap:'0%',
                    barCategoryGap:'50%',
                    data: v2
                }

            ]
        };
        
        Init3(option, id);
    }
    //------------------------------------------------------------------------
    function cout(obj){ console.log(obj); }
    function d() { return Math.round(Math.random()*1000); }
    function Init3(option, id){
        var view = id + "view";
        var objs = $("#" + id + " .ui-resizable-handle");
        if($("#"+view).length==0){
            $("#"+id).append("<div class='viewGraph' id = '" + view + "' style=''></div>");
        }
        
        var myChart = echarts.init(document.getElementById(view), '');
        myChart.setOption(option);
        
        $("#" + view).css("background", "none");
        return myChart;
    }
	function Init(option, id){
        var myChart = echarts.init(document.getElementById(id), '');
        myChart.setOption(option);
        myChart.hideLoading();
        return myChart;
    }






</script>